<template>
	<view class="personal">
		<section class="personal-header">
			<view class="user-info">
				<view class="welcome">欢迎回来</view>
				<view class="user-name">
					{{ user_name != "" ? user_name : "坦克粉" }} <span class="user-mobile">{{ mobile || "" }}</span>
				</view>
			</view>
			
			<img :src="icon_avatar" style="width: 60px;height: 60px;border-radius: 100%;background-color: aliceblue;" />
		</section>
		
		<section class="operation-box">
			<view class="operation-item">
				<view class="operation-item-num">
					188
				</view>
				<view class="operation-item-desc">
					余额
				</view>
			</view>
			<view class="operation-item">
				<view class="operation-item-num">
					0
				</view>
				<view class="operation-item-desc">
					积分
				</view>
			</view>
			<view class="operation-item">
				<view class="operation-item-num">
					0
				</view>
				<view class="operation-item-desc">
					优惠券
				</view>
			</view>
		</section>
		
		<section class="vip-card">
			<view class="vip-desc">
				<view class="vip-desc-cell">
					<span>普通会员</span>
					<span>领取会员卡</span>
				</view>
				<view class="vip-desc-cell">
					<span>获取积分升级</span>
					<span style="display: flex;align-items: center;">
						会员权益
						<image src="../../../static/index/next_mini.png" style="width: 8px;height: 12px;margin-left: 10px;" mode=""></image>
					</span>
				</view>
			</view>
			
			<view class="growth-value">
				<view class="growth-desc">
					成长值 0/0
				</view>
				<view class="growth-step"></view>
			</view>
		</section>
		
		<section class="grid-box">
			<u-grid
			    :border="false"
			   
			>
			    <u-grid-item
			        v-for="(_item, _index) in grid_list"
			        :key="_index"
					:customStyle="{marginBottom:30+'rpx'}"
					 @click="handle_grid_click(_item.url)"
			    >
					<u-icon
			            :customStyle="{paddingTop:20+'rpx'}"
			            :name="_item.name"
			            :size="25"
			        ></u-icon>
			            <text class="grid-text">{{_item.title}}</text>
			    </u-grid-item>
			</u-grid>
			
		</section>
		
		<AboutUs></AboutUs>
		
	</view>
	<tabBar></tabBar>
</template>

<script setup>
	import tabBar from "../components/tab_bar.vue"
	import AboutUs from "../components/about_us.vue"
	import { onMounted, ref } from "vue"
	import { get_user_info } from "../common/api.js"
	const icon_avatar = ref("/static/orders/icon_avatar_default.svg");
	const user_name = ref("");
	const mobile = ref("")
	
	onMounted(() => {
		get_user_info({
			user_id: uni.getStorageSync("openid")
		}).then((info) => {
			user_name.value = info.user_name;
			mobile.value = info.mobile

		})
	})
	
	
	
	const grid_list = ref([
		{name: 'map',title: '我的地址', url: "/pages/Tank/address/address_list"},
		{name: 'order',title: '我的订单', url: "/pages/Tank/orders/index"},
		{name: 'rmb-circle',title: '充值中心', url: "/pages/Tank/wallet/index"},
		{name: 'coupon',title: '领券中心', url: ""},
		{name: 'checkmark',title: '签到中心', url: ""},
		{name: 'car',title: '积分商城', url: ""},
		{name: 'level',title: '会员中心', url: ""},
		{name: 'wifi',title: 'wifi', url: ""},
		{name: 'kefu-ermai',title: '联系客服', url: ""},
	])
	
	const handle_grid_click = (url) => {
		if(!url || url == ""){
			uni.showToast({
				title: '暂未开放哦，敬请期待...',
				duration: 2000,
				icon: "none"
			});
			return 
		}
		uni.navigateTo({
			url: url,
			animationType: "pop-in",
			animationDuration: 200
		});
	}
	
</script>

<style lang="scss">
	.personal{
		width: 100%;
		height: 100%;
		padding: 50rpx;
		box-sizing: border-box;
		
		.personal-header{
			width: 100%;
			height: 120rpx;
			display: flex;;
			justify-content: space-between;
			
			.user-info{
				width: calc(100% - 180rpx);
				height: 100%;
				display: flex;
				flex-direction: column;;
				justify-content: space-between;
				
				.welcome{
					font-size: 30rpx;
					color: #333333;
					
				}
				
				.user-name{
					font-size: 44rpx;
					color: #333333;
					font-weight: 550;
					
					.user-mobile{
						font-size: 30rpx;
					}
				}
			}
			
		}
		
		.operation-box{
			width: 100%;
			height: 80rpx;
			margin-top: 60rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			
			.operation-item{
				width: 100rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #333333;
				.operation-item-num{font-size: 32rpx;color: #333333;}
			}
		}
		
		.vip-card{
			width: 100%;
			height: 340rpx;
			background-color: #333333;
			border-radius: 30rpx;
			margin-top: 70rpx;
			padding: 55rpx 30rpx;
			box-sizing: border-box;
			display: flex;;
			flex-direction: column;;
			justify-content: space-between;
			
			.vip-desc{
				width: 100%;
				height: 80rpx;
				display: flex;;
				flex-direction: column;;
				justify-content: space-between;
				
				.vip-desc-cell{
					width: 100%;
					height: fit-content;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #fff;
					
				}
			}
			
			.growth-value{
				width: 100%;
				height: 55rpx;
				display: flex;;
				flex-direction: column;;
				justify-content: space-between;
				
				.growth-desc{
					width: 100%;
					height: fit-content;
					font-size: 24rpx;
					color: #fff;
				}
				
				.growth-step{
					width: 70%;
					height: 3px;
					border-radius: 2px;
					background-color: #fff;
				}
				
			}
			
		}
		
		.grid-box{
			width: 100%;
			margin-top: 80rpx;
			.grid-text{
				font-size: 24rpx;
				margin-top: 12rpx;
				letter-spacing: 1rpx;
			}
		}
	}
</style>